import { defineConfig,splitVendorChunkPlugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postCssPxToRem from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue()
  ],
  base: './', // 新增
  server: {
    port: 3000,
    cors: true, // 允许跨域
    hmr: true, // 开启热更新
  },
  resolve:{
    alias:{
      "@": path.resolve(__dirname, './src'),
    }
  },

  css:{
    postcss:{
      plugins:[
        postCssPxToRem({
          rootValue: 16, // 设计稿宽度 / 10
          propList: ['*'],
          unitPrecision: 5
        })
      ]
    }
  },
  build: {
    cssCodeSplit: true, // 启用 CSS 代码拆分
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString()
          }
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        // 　　chunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]',
        chunkFileNames: 'js/[name].[hash].js'
      }
    }
  }
})
